<template>
  <div class="userManager">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-row>
        <!-- 输入框 -->
        <el-form
          :model="queryData"
          ref="form"
          :rules="formRules"
          label-width="60px"
          :inline="true"
          size="small"
          label-position="left"
        >
          <el-form-item label="用户名">
            <el-input
              v-model.trim="queryData.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model.trim="queryData.mobile"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <!-- 性别下拉框 -->
          <el-form-item label="性别">
            <el-select v-model="queryData.sex" placeholder="请选择" clearable>
              <el-option value="男">男</el-option>
              <el-option value="女">女</el-option>
            </el-select>
          </el-form-item>

          <!-- 搜索、重置按钮 -->
          <el-form-item>
            <template>
              <el-button
                type="primary"
                size="small"
                icon="el-icon-search"
                @click="searchInfo"
                >搜索</el-button
              >
              <el-button size="small" icon="el-icon-refresh" @click="refreshBtn"
                >重置</el-button
              >
            </template>
          </el-form-item>
        </el-form>

        <!-- 新增、导出按钮 -->
        <el-row type="flex" justify="space-between">
          <div>
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="small"
              @click="$refs.addForm.isShow = true"
              >新增</el-button
            >
            <el-button type="warning" plain icon="el-icon-download" size="small"
              >导出</el-button
            >
          </div>
          <!-- 右侧图标 -->
          <div>
            <RightIcon />
          </div>
        </el-row>
        <br />

        <!-- 表格 -->
        <el-table :data="list" border stripe>
          <el-table-column label="#" type="index"> </el-table-column>
          <el-table-column label="用户ID" prop="id"> </el-table-column>
          <el-table-column label="用户名" prop="username"> </el-table-column>
          <el-table-column label="手机号" prop="mobile"> </el-table-column>
          <el-table-column label="用户头像">
            <template slot-scope="{ row }">
              <img :src="row.icon" style="width: 100px" />
            </template>
          </el-table-column>
          <el-table-column label="性别" prop="sex">
            <template slot-scope="{ row }">
              <el-tag v-if="row.sex === 0">男</el-tag>
              <el-tag v-else type="success">女</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="出生年月" prop="birthday"> </el-table-column>
          <el-table-column label="操作" align="center" header-align="center">
            <template slot-scope="{ row }">
              <!-- {{ row }} -->

              <!-- 编辑按钮 -->
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="editUserInfo(row.id)"
              ></el-button>

              <!-- 删除按钮 -->
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delRow(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />

        <!-- 分页器 -->
        <el-row type="flex" justify="end">
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="queryData.page"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="queryData.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          >
          </el-pagination>
        </el-row>
      </el-row>
    </el-card>

    <!-- 弹窗 -->
    <addForm ref="addForm" @updateList="initData" />
  </div>
</template>

<script>
import RightIcon from "@/components/RightIcon";
import { delUserApi, getTableDataApi } from "@/api/userManager";
import addForm from "./components/addForm.vue";
export default {
  components: { RightIcon, addForm },
  data() {
    return {
      // 请求参数
      queryData: {
        sex: "",
        username: "",
        mobile: "",
        page: 1,
        limit: 10,
      },

      formData: {
        sex: "",
        username: "",
        mobile: "",
      },

      // 表格校验规则
      formRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
      // 总数
      total: 0,
      // 列表数据
      list: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    // 获取列表信息
    async initData() {
      // 发起网络请求
      let res = await getTableDataApi(this.queryData);
      console.log(res);
      // if (res.data.icon) {
      res.data = res.data.map((item) => {
        item.icon = process.env.VUE_APP_WEB_URL + "/" + item.icon;
        return item;
      });
      // }

      // 赋值操作
      this.list = res.data;
      this.total = res.count;
    },

    // 页码切换事件
    currentChange(val) {
      this.queryData.page = val;
      this.initData();
    },

    // 每页数量发生变化事件
    sizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },

    // 搜索事件
    searchInfo() {
      this.queryData.page = 1;
      this.initData();
    },

    // 重置事件
    refreshBtn() {
      this.queryData = {
        sex: "",
        username: "",
        mobile: "",
        page: 1,
        limit: 10,
      };
      this.initData();
    },

    // 删除事件
    async delRow(id) {
      // console.log(id);
      try {
        // 1. 提示框
        await this.$confirm("确定要删除么？");
        // 2. 发起网络请求
        await delUserApi(id);
        // 3. 提示成功
        this.$message.success("删除成功");
        // 4. 边缘处理
        if (this.queryData.page > 1 && this.list.length === 1) {
          this.queryData.page--;
        }
        // 5. 更新列表
        this.initData();
      } catch (error) {
        console.log(error);
      }
    },

    // 编辑事件
    editUserInfo(id){
      this.$refs.addForm.editUserInfo(id)
    }
  },
};
</script>

<style scoped></style>
